<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
			>
				<el-form-item :label="`${$t('merchant.merchant_name')}:`">
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item>
					<el-button
						:disabled="loading"
						icon="el-icon-search"
						size="medium"
						type="primary"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						:disabled="loading"
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('803051')"
						:disabled="loading"
						icon="el-icon-plus"
						size="medium"
						type="success"
						@click="editAndAdd"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				:data="tableData"
				:header-cell-style="getRowClass"
				border
				element-loading-spinner="el-icon-loading"
				style="width: 100%"
				:max-height="tableHeight"
			>
				<el-table-column
					:label="$t('merchant.merchant_name')"
					:show-overflow-tooltip="true"
					align="center"
					prop="merchantName"
					width="180px"
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.all_download_url')"
					:show-overflow-tooltip="true"
					align="center"
					prop="downUrl"
				>
					<template slot-scope="scope">
						{{ scope.row.downUrl || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.h5_game_url')"
					:show-overflow-tooltip="true"
					align="center"
					prop="h5Url"
				>
					<template slot-scope="scope">
						{{ scope.row.h5Url || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.pc_game_url')"
					:show-overflow-tooltip="true"
					align="center"
					prop="pcUrl"
				>
					<template slot-scope="scope">
						{{ scope.row.pcUrl || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="安卓下载地址"
					:show-overflow-tooltip="true"
					align="center"
					prop="pcUrl"
				>
					<template slot-scope="scope">
						{{ scope.row.androidUrl || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="ios下载地址"
					:show-overflow-tooltip="true"
					align="center"
					prop="pcUrl"
				>
					<template slot-scope="scope">
						{{ scope.row.iosUrl || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.creator')"
					align="center"
					prop="createdBy"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.create_time')"
					align="center"
					prop="createdAt"
					width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.last_operate')"
					:show-overflow-tooltip="true"
					align="center"
					prop="updatedBy"
				>
					<template slot-scope="scope">
						{{ scope.row.updatedBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('merchant.last_operate_time')"
					:show-overflow-tooltip="true"
					align="center"
					prop="updatedAt"
					width="180"
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('common.actions')"
					align="center"
					prop="operating"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('803052')"
							size="medium"
							type="text"
							@click="editAndAdd(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:destroy-on-close="true"
			:title="`${$t('merchant.merchant_game_url')}${title}`"
			:visible.sync="dialogFormVisible"
			width="700px"
			@close="clear"
		>
			<el-form
				ref="dialogForm"
				:model="dialogForm"
				:rules="rules"
				label-width="auto"
			>
				<el-form-item
					v-if="title !== $t('common.edit')"
					:label="`${$t('merchant.merchant_name')}:`"
					:placeholder="$t('common.please_choose')"
					:rules="[
						{
							required: true,
							message: `${$t('merchant.merchant_placeholder')}`,
							trigger: 'change'
						}
					]"
					prop="merchantId"
				>
					<el-select
						v-model.trim="dialogForm.merchantId"
						style="width: 550px"
					>
						<el-option
							v-for="item in merchartList"
							:key="item.id"
							:disabled="item.disabled"
							:label="item.merchantName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					v-else
					:label="`${$t('merchant.merchant_name')}:`"
					prop="merchantId"
				>
					<merchant-select
						v-model.trim="dialogForm.merchantId"
						:disabled="title === $t('common.edit')"
						:placeholder="$t('common.please_choose')"
						style="width: 550px"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.all_download_url')}:`"
					prop="downUrl"
				>
					<el-input
						v-model.trim="dialogForm.downUrl"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="500"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.h5_game_url')}:`"
					prop="h5Url"
				>
					<el-input
						v-model.trim="dialogForm.h5Url"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="500"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.pc_game_url')}:`"
					prop="pcUrl"
				>
					<el-input
						v-model.trim="dialogForm.pcUrl"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="500"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item :label="`安卓下载地址:`" prop="androidUrl">
					<el-input
						v-model.trim="dialogForm.androidUrl"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="500"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item :label="`ISO下载地址:`" prop="iosUrl">
					<el-input
						v-model.trim="dialogForm.iosUrl"
						:placeholder="$t('common.please_enter')"
						clearable
						maxlength="500"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('merchant.remark_info')}:`"
					prop="remark"
				>
					<el-input
						v-model.trim="dialogForm.remark"
						:placeholder="$t('common.please_enter')"
						maxlength="500"
						rows="8"
						show-word-limit
						type="textarea"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :loading="butLoading" @click="clear()">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					:loading="butLoading"
					type="primary"
					@click="submitForm()"
				>
					{{ $t('common.sure') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import {
	addMerchantGameLinkApi,
	queryMerchantGameLinkListApi,
	updateMerchantGameLinkApi
} from '@/api/merchant/merchant-config/game-link-config'
import { queryMerchantListApi } from '@/api/merchant/merchant-manage/merchant-list'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.gameLinkConfig,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		this.search = this.throttle(this.search, 1000)
		this.reset = this.throttle(this.reset, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: { merchantId: undefined },
			tableData: [],
			merchartList: [],
			dialogFormVisible: false,
			dialogForm: {
				merchantId: undefined,
				downUrl: undefined,
				h5Url: undefined,
				pcUrl: undefined,
				iosUrl: undefined,
				androidUrl: undefined,
				remark: undefined
			},
			title: '',
			butLoading: false,
			rules: {
				merchantId: [
					{
						required: true,
						message: this.$t('merchant.merchant_placeholder'),
						trigger: 'change'
					}
				],
				pcUrl: [
					{
						required: true,
						message: this.$t('merchant.check_length_10'),
						trigger: 'blur'
					},
					{
						min: 10,
						max: 500,
						message: this.$t('merchant.check_length_10'),
						trigger: 'blur'
					}
				],
				h5Url: [
					{
						required: true,
						message: this.$t('merchant.check_length_10'),
						trigger: 'blur'
					},
					{
						min: 10,
						max: 500,
						message: this.$t('merchant.check_length_10'),
						trigger: 'blur'
					}
				],
				// iosUrl: [
				// 	{
				// 		required: true,
				// 		message: this.$t('merchant.check_length_10'),
				// 		trigger: 'blur'
				// 	},
				// 	{
				// 		min: 10,
				// 		max: 500,
				// 		message: this.$t('merchant.check_length_10'),
				// 		trigger: 'blur'
				// 	}
				// ],
				// androidUrl: [
				// 	{
				// 		required: true,
				// 		message: this.$t('merchant.check_length_10'),
				// 		trigger: 'blur'
				// 	},
				// 	{
				// 		min: 10,
				// 		max: 500,
				// 		message: this.$t('merchant.check_length_10'),
				// 		trigger: 'blur'
				// 	}
				// ],
				downUrl: [
					{
						required: true,
						message: this.$t('merchant.check_length_10'),
						trigger: 'blur'
					},
					{
						min: 10,
						max: 500,
						message: this.$t('merchant.check_length_10'),
						trigger: 'blur'
					}
				],
				remark: [
					{
						min: 2,
						required: true,
						message: this.$t('merchant.check_length_2'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		// 获取商户列表
		async getMerchantList() {
			try {
				this.loading = true
				const { data } = await queryMerchantListApi({})
				this.merchartList = data
			} catch (e) {
				this.loading = false
			}
		},
		// 获取列表数据
		async loadData() {
			try {
				this.loading = true
				const res = await queryMerchantGameLinkListApi({
					...this.queryData,
					...this.pageParams
				})
				const { code, data } = res || {}
				if (code === 200 && data) {
					const { pageNum, pageSize, totalRecord } = data
					this.pageNum = pageNum
					this.ppageSize = pageSize
					this.total = totalRecord || 0
					this.tableData = data?.record
				}
				this.loading = false
			} catch (e) {
				this.loading = false
			}
		},
		// 弹窗显示
		async editAndAdd(row) {
			this.$refs.dialogForm && this.$refs.dialogForm.clearValidate()
			if (row.merchantId) {
				this.title = this.$t('common.edit')
				this.dialogForm = { ...row }
			} else {
				this.dialogForm = {}
				this.merchartList.length = 0
				this.loading = true
				await this.getMerchantList()
				const { data } = await queryMerchantGameLinkListApi({
					pageSize: 200
				})
				data?.record?.map((table) => {
					this.merchartList.map((merchant) => {
						if (table.merchantId === merchant.id) {
							merchant.disabled = true
						}
					})
				})
				this.title = this.$t('common.add')
			}
			this.loading = false
			this.dialogFormVisible = true
		},
		submitForm() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.butLoading = true
					try {
						this.title === this.$t('common.add')
							? await addMerchantGameLinkApi(this.dialogForm)
							: await updateMerchantGameLinkApi(this.dialogForm)

						this.$message({
							message: `${this.title}${this.$t(
								'common.success'
							)}`,
							type: 'success'
						})
						this.butLoading = false
						this.clear()
						await this.loadData()
					} catch (e) {
						this.butLoading = false
					}
				}
			})
		},
		reset() {
			this.queryData = {}
			this.loadData()
		},
		clear() {
			this.dialogForm = {}
			this.$refs.dialogForm.clearValidate()
			this.dialogFormVisible = false
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}

::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}

::v-deep .rempadding .el-dialog__body {
	padding: 0;
	padding-bottom: 30px;

	.contentBox,
	form {
		padding: 0 20px;
	}
}

::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
	display: none;
}

::v-deep .el-input-number--medium .el-input__inner {
	padding: 0 15px;
	text-align: left;
}

.decoration {
	text-decoration: underline;
	cursor: pointer;
}

.nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
